<template>
	<Card>
	<view class="selectArea">
		<view class="row">
			<view class="item">
				<view class="label">
					楼栋：
				</view>
				    <uni-data-select
				      v-model="formData.buildId"
					  placeholder="请选择楼栋"
				      :localdata="buildingList"
				      @change="changeBuildingName"
				    ></uni-data-select>
			</view>
			<view class="item">
				<view class="label">
					楼层：
				</view>
				    <uni-data-select
				      v-model="formData.floorId"
					  placeholder="请选择楼层"
				      :localdata="floorList"
				      @change="changeFloorName"
				    ></uni-data-select>
			</view>
		</view>
		<view class="row">
			<view class="item">
				<view class="label">
					房间：
				</view>
				    <uni-data-select
				      v-model="formData.roomId"
					  placeholder="请选择房间"
				      :localdata="roomList"
				      @change="changeRoomNumber"
				    ></uni-data-select>
			</view>
			<view class="item">
				<view class="btn" @click="confirm">
					查询
				</view>
			</view>
		</view>
	</view>	
	</Card>
</template>

<script setup> 
import {selectBuildList,selectFloorList,selectRoomList} from '@/api/dataInt.js'
 import {reactive, ref, watch} from  'vue'
	const formData = reactive({
		buildId:"",
		floorId:"",
		roomId:""
	})
const props = defineProps({
	formData:{
		type:Object,
		required:true
	}
})
watch(()=>props.formData,(val)=>{
	if(val.buildId == ""){
		formData.buildId = ""
	}
    if(val.floorId == ""){
		formData.floorId = ""
	}
	if(val.roomId === ""){
		formData.roomId = ""
	}
},{
	deep:true,
	immediate:true
})
const buildingList = ref([])
const floorList = ref([])
const roomList = ref([])
// 获取楼栋列表
const getSelectBuildList = async()=>{
const {code,data:res} = await selectBuildList()
if(code === 200){
	if(res.length > 0){
		buildingList.value =res.map(val=>{
			return {
				value:val.buildId,
				text:val.buildingName
			}
		})
	}
}
}
getSelectBuildList()
// 获取楼层列表
const getSelectFloorList = async()=>{
	const {code,data:res} = await selectFloorList({buildId:formData.buildId })
	if(code === 200){
		if(res.length > 0){
			floorList.value =res.map(val=>{
				return {
					value:val.floorId,
					text:val.floorName
				}
			})
		}
	}
}
// 获取房间列表
const getSelectRoomList = async()=>{
	const {code,data:res} = await selectRoomList({buildId:formData.buildId,floorId:formData.floorId})
	if(code === 200){
		if(res.length > 0){
			roomList.value =res.map(val=>{
				return {
					value:val.roomId,
					text:val.roomNumber
				}
			})
		}
	}
}

  // 请选择楼栋
  const changeBuildingName = (e)=>{
	  formData.buildId = e
	  floorList.value = []
	  formData.floorId = ""
	  formData.roomId = ""
	  roomList.value = []
	  getSelectFloorList()
  }
  //请选择楼层
  const changeFloorName = (e)=>{
	  formData.floorId = e
	  	roomList.value = []
		 formData.roomId = ""
	  getSelectRoomList()
  }
  // 请选择房间
  const changeRoomNumber = (e)=>{
	  formData.roomId = e
  }
  // 开始查询老人列表
  const emit = defineEmits(["confirm"])
  const confirm = ()=>{
	// const flag =  Object.values(formData).every((val=>{
	// 	  return val === ""
	//   }))
	// if(flag) return
	  emit("confirm",formData)
  }
</script>

<style lang="less" scoped>
	.selectArea{
		.row{
			display: flex;
			.label{
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
			.item{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-right: 20rpx;
				&:last-child{
					margin-right: 0;
				}
				.btn{
					height: 56rpx;
					background: linear-gradient( 180deg, #70B4FE 0%, #2778FF 100%);
					border-radius: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					padding: 0 56rpx;
					line-height: 56rpx;
				}
			}
			&:first-child{
				margin-bottom: 20rpx;
			}
		}
	}
	@media screen and (min-width: 768px){
		.selectArea{
			.row{
				.label{
					font-size: 42rpx;
				}
				:deep(.uni-select__input-box){
					height: 100rpx;
				}
				:deep(.uni-select){
					height: 100rpx;
				}
				:deep(.uni-select__input-placeholder){
					font-size: 42rpx;
				}
				:deep(.uni-select__input-text){
					font-size: 42rpx;
				}
				:deep(.uni-select__selector-item){
					font-size: 36rpx;
				}
				.item{
					.btn{
						height: 102rpx;
						line-height: 102rpx;
						padding:0 125rpx;
						font-size: 42rpx;
						border-radius: 15rpx; 
					}
				}
			}
		}
	}
</style>